<template>
  <div class="pho-form-table-container" :style="newStyle">
    <table border="1" cellpadding="0" cellspacing="0" align="center">
      <tr v-for="(tr,rIndex) in list" :key="rIndex">
        <template v-for="(td,dIndex) in tr.children">
          <td
            v-if="td && td.colspan && td.rowspan"
            :key="dIndex"
            :colspan="td.colspan"
            :rowspan="td.rowspan"
            :style="{ width:100/tr.children.length+'%',...td.style ,borderWidth:$attrs.borderWidth+'px',borderColor:$attrs.borderColor,padding:$attrs.cellpadding+'px'}"
          >
            <phone-form-row-container
              :font="newStyle.font"
              :list.sync="td.children"
              v-bind="$attrs"
            />
          </td>
        </template>
      </tr>
    </table>
  </div>
</template>
 
<script>
// import draggable from "vuedraggable";
import { deepClone, toCamelCase } from "../../../utils/index";
import { comMixin } from "../../../utils/comMixins";
export default {
  mixins: [comMixin],
  name: "phone-form-table-container",
  // components: {
  //   draggable,
  // },
  props: {
    // 当前选中表单
    currentData: {
      type: Object,
      default: () => {},
    },
    height: {
      type: String,
      default: "",
    },
    list: {
      type: Array,
      default: () => [],
    },
    scale: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      activeData: {},
      deepClone,
      toCamelCase,
      rows: [],
    };
  },
  mounted() {},
  watch: {},
  methods: {},
};
</script>

<style lang="scss" >
@import "../../../styles/generator.scss";
.pho-form-table-container {
  padding: 10px 16px;
  overflow-x: auto;
  table {
    width: 100%;
    border: 1px solid #ebeef5;
    border-width: 0;
    border-collapse: collapse; /* 折叠边框，使其看起来更整洁 */
  }
  th,
  td {
    border: 1px solid #ebeef5;
  }
  td {
    // height: 60px;
    min-width: 100px;
  }
  .pho-form-item:last-child {
    &::before {
      display: none;
    }
  }
}
</style>